<template>
	<view class="statistic">
		<u-toast ref="uToast"></u-toast>
		<u-no-network></u-no-network>
		<view class="statistic__title flex justify-between">
			<view class="statistic__date" @click="pickerVisable=true">
				{{date}}
			</view>
			<view class="statistic__filter" @click="showBottomDialog=true">
				筛选
				<u-icon name="arrow-down-fill" color="#333333" size="28"></u-icon>
			</view>
		</view>

		<view class="statistic__header">
			<view class="statistic__header-title">累计收益(元)</view>
			<view class="statistic__header-money">{{benefitData.totolIncome}}</view>
		</view>
		<view class="statistic__content">
			<u-tabs :list="list" name="name" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<view class="flex justify-between">
				<view class="flex-1 u-text-center">
					日期
				</view>
				<view class="flex-1 u-text-center">
					类型
				</view>
				<view class="flex-1 u-text-center">
					交易收益
				</view>
			</view>
			<scroll-view class="home__grid-group mt-20" scroll-y @scrolltolower="onScrolltolower">
				<view>
					<view class="flex justify-between" v-for="(item,index) in benefitList" :key="index">
						<view class="flex-1 u-text-center">

							{{item.createTime}}
						</view>

						<view class="flex-1 u-text-center">
							{{item.changeType=="POS_PROFIT_SHARE"?"POS交易分润":item.changeType=="POS_SETTLE_SHARE"?"POS笔数分润":item.changeType=="EXTRACTION_PROFIT"?"提现手续费分成":item.changeType=="SCAN_CODE_PROFIT_SHARE"?"扫码交易分润":item.changeType=="SCAN_CODE_SETTLE_SHARE"?"扫码笔数分润":item.changeType=="ACTIVITY_CASH_BACK"?"激活返现":item.changeType=="STANDARD_CASH_BACK"?"达标返现":item.changeType=="FLOW_RECASH_CASH_BACK"?"流量卡返现":item.changeType=="WITHDRAWAL"?"账户提现":item.changeType=="WITHDRAWAL_OFFSET"?"账户提现冲正":item.changeType=="WITHDRAWAL_COMPLETED"?"账户提现完成":item.changeType=="ADJUSTMENT_ADD"?"调增":item.changeType=="ADJUSTMENT_SUBTRACT"?"调减":item.changeType=="SUSPEND_INIT"?"止付订单初始化":item.changeType=="SUSPEND_COMPLETE"?"止付订单已完成":item.changeType=="SUSPEND_WAITING"?"止付订单止付中":item.changeType=="SUSPEND_REMOVE"?"止付订单已解除":""}}
						</view>

						<view class="flex-1 u-text-center">
							{{item.changeAmount}}
						</view>
					</view>
					<u-loadmore :status="status" />
				</view>
			</scroll-view>
		</view>

		<u-popup v-model="showBottomDialog" mode="bottom" class="pop" border-radius="20" height="600px">
			<view class="pop__item " :class="{'select':checked===index}" v-for="(item, index) in typeFilter"
				:key="index" @click="selectBtn(index)">

				<view>{{item.name}}</view>
			</view>

		</u-popup>

		<term-picker :visable.sync="pickerVisable" :defaultDate="defaultDay" :maxDay="maxDay" @confirm="confirmByDay">
		</term-picker>
	</view>
</template>

<script>
	import termPicker from '@/components/term-picker/term-picker.vue';
	import getDateTime from '@/common/js/getdateTime.js';
	export default {
		components: {
			termPicker
		},
		data() {
			return {
				checked: null,
				benefitData: {},
				time: {},
				date: "",
				showCalendar: false,
				data: {
					"changeType": "", //筛选
					"startCreateTime": "",
					"endCreateTime": ""
				},
				showBottomDialog: false,
				typeList: [],
				list: [{
					name: '交易收益',
					value: "POS_PROFIT" //POS_PROFIT交易
				}, {
					name: '活动收益',
					value: "ACTIVE_PROFIT" //ACTIVE_PROFIT
				}, {
					name: '流量卡收益',
					value: "FLOW_PROFIT" //FLOW_PROFIT

				}, {
					name: '其他收益',
					value: "OTHER_PROFIT" //OTHER_PROFIT

				}],
				current: 0,
				params: {
					"accountType": "POS_PROFIT", //POS_PROFIT交易
					"changeType": "", //筛选
					"startCreateTime": "",
					"endCreateTime": ""
				},
				benefitList: [],
				pageNo: 1,
				pageSize: "10",
				scrollTop: 0,
				status: "loadmore",
				pickerVisable: false, //是否日期选择控件
				defaultDay: [], //日期默认选择，为空则是当前日期
				maxDay: 30, //最大跨度日
				typeFilter: [{
					name: 'POS交易分润',
					value: "POS_PROFIT_SHARE" //POS_PROFIT交易
				}, {
					name: 'POS笔数分润',
					value: "POS_SETTLE_SHARE" //ACTIVE_PROFIT
				}, {
					name: '提现手续费分成',
					value: "EXTRACTION_PROFIT" //FLOW_PROFIT

				}, {
					name: '扫码交易分润',
					value: "SCAN_CODE_PROFIT_SHARE" //OTHER_PROFIT

				}, {
					name: '扫码笔数分润',
					value: "SCAN_CODE_SETTLE_SHARE" //POS_PROFIT交易
				}, {
					name: '激活返现',
					value: "ACTIVITY_CASH_BACK" //ACTIVE_PROFIT
				}, {
					name: '达标返现',
					value: "STANDARD_CASH_BACK" //FLOW_PROFIT

				}, {
					name: '流量卡返现',
					value: "FLOW_RECASH_CASH_BACK" //OTHER_PROFIT

				}, {
					name: '账户提现',
					value: "WITHDRAWAL" //POS_PROFIT交易
				}, {
					name: '账户提现冲正',
					value: "WITHDRAWAL_OFFSET" //ACTIVE_PROFIT
				}, {
					name: '账户提现完成',
					value: "WITHDRAWAL_COMPLETED" //FLOW_PROFIT

				}, {
					name: '调增',
					value: "ADJUSTMENT_ADD" //OTHER_PROFIT

				}, {
					name: '调减',
					value: "ADJUSTMENT_SUBTRACT" //POS_PROFIT交易
				}, {
					name: '止付订单初始化',
					value: "SUSPEND_INIT" //ACTIVE_PROFIT
				}, {
					name: '止付订单止付中',
					value: "SUSPEND_WAITING" //FLOW_PROFIT

				}, {
					name: '止付订单已完成',
					value: "SUSPEND_COMPLETE" //OTHER_PROFIT

				}, {
					name: '止付订单已解除',
					value: "SUSPEND_REMOVE" //OTHER_PROFIT

				}],

			}
		},
		mounted() {
			this.time = getDateTime.dateTimeStr('y-m-d');;
			this.data.startCreateTime = getDateTime.getDateStr(null, -1);
			this.data.endCreateTime = this.time;
			this.date = this.data.startCreateTime + "至" + this.data.endCreateTime;
			this.getSumAccountDetail();
			this.params.startCreateTime = getDateTime.getDateStr(null, -1);
			this.params.endCreateTime = this.time;
			this.listAccountDetail();
		},
		onReachBottom() {
			this.onScrolltolower();
		},
		methods: {

			selectBtn(index) {
				this.checked = index;
				this.params.changeType = this.typeFilter[index].value;
				this.showBottomDialog = false;
				this.benefitList = [];
				this.pageNo = 1;
				this.listAccountDetail();
			},
			change(index) {
				this.current = index;
				this.params.accountType = this.list[index].value;
				this.benefitList = [];
				this.pageNo = 1;
				this.listAccountDetail();
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			onScrolltolower() {
				this.status = "loading";
				this.terminalInfoList();
			},
			calendarChange(e) {

				this.date = e.startDate + "至" + e.endDate;
				this.data.startCreateTime = e.startDate;
				this.data.endCreateTime = e.endDate;
				this.getSumAccountDetail();

				this.benefitList = [];
				this.pageNo = 1;
				this.params.startCreateTime = e.startDate;
				this.params.endCreateTime = e.endDate;
				this.listAccountDetail();
			},
			getSumAccountDetail() {
				const _that = this;
				_that.$zx.order_api.sumAccountDetail(_that.data).then((data) => {
					console.log("data=" + JSON.stringify(data))
					_that.benefitData = data;


				});
			},
			listAccountDetail() {
				const _that = this;
				this.$zx.order_api.listAccountDetail(this.pageNo, this.pageSize, this.params).then((data) => {
					console.log("data=" + JSON.stringify(data))

					_that.benefitList = _that.benefitList.concat(data.list);
					// console.log("data=" + JSON.stringify(_that.terminalList))
					if (data.length !== 0) {
						this.status = "loadmore";
						this.pageNo += 1;
					} else {
						this.status = "nomore";
					}

				});
			},

			confirmByDay(date) {
				this.date = date[0] + "至" + date[1];
				this.data.startCreateTime = date[0];
				this.data.endCreateTime = date[1];
				this.getSumAccountDetail();
				this.params.startCreateTime = date[0];
				this.params.endCreateTime = date[1];
				this.pageNo = 1;
				this.benefitList = [];
				this.listAccountDetail();
			},
		},
	}
</script>

<style scoped lang="scss">
	.statistic {
		width: 100vw;
		height: 100vh;
		position: relative;
		padding: 10rpx;

		&__title {

			margin: 20rpx;
		}

		&__date {
			// width: 300rpx;
			background-color: white;
			border-radius: 50rpx;
			padding: 10rpx 20rpx;
		}

		&__filter {
			background-color: white;
			border-radius: 50rpx;
			padding: 10rpx 20rpx;
		}

		&__tip {
			font-size: 11px;
			margin-left: 20rpx;

		}

		&__header {
			background-image: url(/static/image/benefit/img_trade_query_bg.png);
			background-size: 100% 100%;
			color: white;
			text-align: center;
			height: 244rpx;
			padding: 20rpx 30rpx;

		}

		&__header-title {
			margin-top: 30rpx;

		}

		&__header-money {
			margin-top: 30rpx;
			font-size: 22px;
			font-weight: bold;
			margin-bottom: 40rpx;
		}

		&__item {
			background-color: #f6f6f6;
			border-radius: 20rpx;
			margin: 20rpx;
		}

		&__content {
			background-color: white;
			margin: 20rpx;
			border-radius: 20rpx;
			padding: 20rpx;
		}

	}

	.pop {
		&__item {
			background-color: #f6f6f6;
			border-radius: 20rpx;
			margin: 20rpx;
			padding: 20rpx;
		}
	}

	.select {
		background-color: #F1E8FF;
		color: #9D60FF;
		background-image: url("/static/image/home/icon_filter_checked.png");
		background-position: right bottom;
		background-repeat: no-repeat;
	}
</style>